import { Link, useLocation } from '@tanstack/react-router';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { useTheme, useUIActions } from '../store/useStore';
import { cn } from '../lib/utils';

interface LayoutProps {
  children: React.ReactNode;
}

export default function Layout({ children }: LayoutProps) {
  const location = useLocation();
  const theme = useTheme();
  const { toggleTheme } = useUIActions();

  const navigation = [
    { name: 'Home', href: '/' },
    { name: 'Users', href: '/users' },
    { name: 'Posts', href: '/posts' },
    { name: 'Create Post', href: '/posts/create' },
  ];

  const isActive = (href: string) => {
    if (href === '/') {
      return location.pathname === '/';
    }
    return location.pathname.startsWith(href);
  };

  return (
    <div className={cn('min-h-screen', theme === 'dark' ? 'dark' : '')}>
      <div className="bg-background text-foreground">
        {/* Header */}
        <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="container flex h-14 items-center justify-between">
            <div className="flex items-center space-x-4">
              <Link to="/" className="flex items-center space-x-2">
                <div className="h-6 w-6 bg-primary rounded" />
                <span className="font-bold">React App</span>
              </Link>
            </div>

            <nav className="flex items-center space-x-4">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  to={item.href}
                  className={cn(
                    'text-sm font-medium transition-colors hover:text-primary',
                    isActive(item.href)
                      ? 'text-primary'
                      : 'text-muted-foreground'
                  )}
                >
                  {item.name}
                </Link>
              ))}
              
              <Button
                variant="outline"
                size="sm"
                onClick={toggleTheme}
                className="ml-4"
              >
                {theme === 'light' ? '🌙' : '☀️'}
              </Button>
            </nav>
          </div>
        </header>

        {/* Main Content */}
        <main className="container mx-auto py-8">
          {children}
        </main>

        {/* Footer */}
        <footer className="border-t">
          <div className="container py-8">
            <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
              <div className="flex items-center space-x-2">
                <span className="text-sm text-muted-foreground">
                  Built with React, TypeScript, TanStack Query & Router
                </span>
              </div>
              <div className="flex items-center space-x-2">
                <Badge variant="secondary">Zustand</Badge>
                <Badge variant="secondary">Tailwind CSS</Badge>
                <Badge variant="secondary">Radix UI</Badge>
                <Badge variant="secondary">React Hook Form</Badge>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
} 